import React from 'react'
import { View } from '@tarojs/components'
import styles from './index.module.scss'

interface CardProps {
    iconLeft?: JSX.Element
    iconRight?: JSX.Element
    title: string
    children: React.ReactNode
}

const Card: React.FC<CardProps> = ({
    iconLeft,
    iconRight,
    title,
    children,
}) => {
    return (
        <View className={styles.card}>
            <View className={styles.cardHeader}>
                {iconLeft && (
                    <View className={styles.cardHeaderIconLeft}>
                        {iconLeft}
                    </View>
                )}
                <View className={styles.cardHeaderTitle}>{title}</View>
                {iconRight && (
                    <View className={styles.cardHeaderIconRight}>
                        {iconRight}
                    </View>
                )}
            </View>
            <View className={styles.cardBody}>{children}</View>
        </View>
    )
}

export default Card
